<template>
	<view class="container">
		
		<view class="flex-between row boxPanel ">
		  <view class="">紧急联系人1</view>
		  <view class="flex-y-center" >
		    <input type="number" placeholder="请输入紧急联系电话" placeholder-class="inputs" v-model="mobileList[0].phone" style="text-align: right;" maxlength="11">
		  	<text class="m-l-20" style="color: #FFA51F;" v-if="mobileList[0].is_check == 1">审核中</text>
			<!-- 1审核中 2是审核通过 -->
		  </view>
		</view>
		<view class="flex-between row boxPanel ">
		  <view class="">紧急联系人2</view>
		  <view class="flex-y-center" >
		    <input type="number" placeholder="请输入紧急联系电话" placeholder-class="inputs" v-model="mobileList[1].phone" style="text-align: right;" maxlength="11">
		  	<text class="m-l-20" style="color: #FFA51F;" v-if="mobileList[1].is_check == 1">审核中</text>
		  </view>
		</view>
		<view class="flex-between row boxPanel ">
		  <view class="">紧急联系人3</view>
		  <view class="flex-y-center" >
		    <input type="number" placeholder="请输入紧急联系电话" placeholder-class="inputs" v-model="mobileList[2].phone" style="text-align: right;" maxlength="11">
		  	<text class="m-l-20" style="color: #FFA51F;" v-if="mobileList[2].is_check == 1">审核中</text>
		  </view>
		</view>
		
		<view class="footer fixfooter" :class="{ 'bottom-safe-area': isIphoneX }">
			<view class="submit" @click="submit">保存</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isIphoneX: false, //判断手机是否是iphoneX以上
				id: '',
				mobileList: [{
					phone: '',
					is_check: 0,
				},{
					phone: '',
					is_check: 0,
				},{
					phone: '',
					is_check: 0,
				}]
			}
		},
		onLoad(data) {
		  this.isIphoneX = this.$util.uniappIsIPhoneX()
		  if(data.id) {
			this.id = data.id;
		  }
		  this.getData();
		},
		methods: {
			getData() {
				this.$api.sendRequest({
					url: "/api/userHealth/getDeviceContacts",
					data: {id: this.id},
					success: res => {
						if(res.code == 0) {
							if(res.data.length > 0) {
								this.mobileList = res.data;
							}
						} else {
							this.$util.showToast({title: res.message});
						}
					}
				})
			},
			submit() {
				
				uni.showLoading({
					title: '提交中...'
				});

				var data = {
					id: this.id,
				}

				data.phone = [this.mobileList[0].phone, this.mobileList[1].phone, this.mobileList[2].phone]

				this.$api.sendRequest({
					url: "/api/userHealth/setDeviceContacts",
					data: data,
					success: res => {
						uni.hideLoading();
						if(res.code == 0) {
							uni.showToast({
								title: '设置成功',
								icon: 'success'
							});
							setTimeout(() => {
								uni.navigateBack();
							}, 1500);
						} else {
							this.$util.showToast({title: res.message});
						}
					}
				})
			},
			validateForm() {
				if(!this.formData.contact1) {
					uni.showToast({title: '请输入紧急联系人1电话', icon: 'none'});
					return false;
				}
				if(!/^1[3-9]\d{9}$/.test(this.formData.contact1)) {
					uni.showToast({title: '紧急联系人1电话格式不正确', icon: 'none'});
					return false;
				}
				if(this.formData.contact2 && !/^1[3-9]\d{9}$/.test(this.formData.contact2)) {
					uni.showToast({title: '紧急联系人2电话格式不正确', icon: 'none'});
					return false;
				}
				if(this.formData.contact3 && !/^1[3-9]\d{9}$/.test(this.formData.contact3)) {
					uni.showToast({title: '紧急联系人3电话格式不正确', icon: 'none'});
					return false;
				}
				return true;
			}
		}
	}
</script>

<style lang="scss" scoped>
.boxPanel {
	padding: 40rpx 24rpx;
}
.row {
	.inputs {
		font-size: 28rpx;
		color: #B8BAC2;
	}
}
</style>
